import React, { useEffect, useState } from 'react'
import request from '../../axios/request.js'
import { SearchBar } from 'antd-mobile'
import {useNavigate} from 'react-router-dom'
const Index = () => {
  let navigate=useNavigate()
  const [list,setlist]=useState([])
  const [wd,setwd]=useState('')
  const getData=async()=>{
    const res=await request.get('/api/list',{params:{wd}})
    const {code,data}=res.data
    if(code==200){
      setlist(data)
      console.log(data)
    }
  }
  useEffect(()=>{
    getData()
  },[wd])
  const godetail=(id)=>{
    navigate(`/detail/${id}`)
  }
  return (
    <div>
    <SearchBar placeholder='请输入内容' value={wd} onChange={(value)=>setwd(value)}/>
      {
        list.length>0&&list.map((item,index)=>(
          <div key={index} onClick={()=>godetail(item.id)}>
            <img src={item.image}></img>
            <p>{item.title}</p>
            <p>￥{item.price}</p>
          </div>
        ))
      }
    </div>
  )
}

export default Index
